<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择</title>
		<style>
		table{
			width: 300px;
            text-align: center;
            margin: 100px auto;
		}
		th{
            color: white;
            padding: 10px;
            font-size: 20px; 
		}
		td{
            color: black;
            padding: 10px;
            font-size: 15px; 
            border-color: #DCDCDC;
            background-color: #F5F5F5;
		}
		</style>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="5" align="center" bordercolor="#DCDCDC">
		   <thead>
			<tr bgcolor="cornflowerblue">
						<th><input type="checkbox" class="tr1" name="1"/></th>
						<th>菜名</th>
						<th>饭店</th>
			</tr>
			</thead>
		    <tr>
                    <td><input type="checkbox" class="tr1"/></td>
                    <td>京酱肉丝</td>
                    <td>田老师</td>
             </tr>
		     <tr>
                    <td><input type="checkbox" class="tr1"/></td>
                    <td>西红柿炒鸡蛋</td>
                    <td>田老师</td>
             </tr>
             <tr>
                    <td><input type="checkbox" class="tr1"/></td>
                    <td>手撕包菜</td>
                    <td>田老师</td>
             </tr>
             <tr>
                    <td><input type="checkbox" class="tr1"/></td>
                    <td>糖醋里脊</td>
                    <td>田老师</td>
             </tr>
		</table>
				
		<script>
			window.onload = function() {
				var tr1= document.getElementsByClassName("tr1");		
				tr1[0].onclick = function() {
					if(tr1[0].name == 1) {
						for(var i = 1; i <tr1.length; i++) {
							tr1[i].checked = true;
						}
						tr1[0].name = 2;
					} else {
						for(var i = 1; i < tr1.length; i++) {
							tr1[i].checked = false;
						}
						tr1[0].name = 1;
					}
					
					for(var i = 1; i < tr1.length; i++) {
						tr1[i].onclick = function() {
							var all = true;
							for(var j = 1; j < tr1.length; j++) {
								if(tr1[j].checked == false) {
									all = false;
								}
							}
							tr1[0].checked = all; 
						}
					}
				}
			}		
		</script>
	</body>
</html>
